<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>CRM客户关系管理</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 	<!-- <link rel="stylesheet" href="/gaoa/Public/css/global.css" media="all"> -->
	<!--<link rel="stylesheet" href="/gaoa/Public/plugins/font-awesome/css/font-awesome.min.css"> -->

	<link rel="stylesheet" href="/gaoa/Public/css/element-ui--index.css">


	<style>
	    *{
	    	font-family: microsoft YaHei;
	    }
		.pull-left {
			float: left;
		}
		.pull-right {
			float: right;
		}
		.container {
			padding: 2px;
		}
		.container > .wrapp >  .el-row {
			margin-bottom: 10px;
		}
		.el-form--inline .el-form-item {
			margin-bottom: 0px;
		}
/*		#app>.wrapp{
			display: none;
		}*/
		
		/*表格条纹样式*/
		.el-table .info-row {
		background: #ffffff;
		}

		.el-table .positive-row {
		background: #c9e5f5;
		}
		.cell img{
			vertical-align: middle;
		}
		
		.el-date-editor.el-input{
			width: 100%;
			max-width: 170px;
		}

		.el-table__body tr.current-row>td{
	      background: rgba(157, 195, 232, 0.7) !important;
	  }

    @media screen and (min-width:1165px) and (max-width:1200px){
      .el-dialog--small {
          width: 70%;
      }
    }

    @media only screen and (max-width:1164px){
      .el-dialog--small {
          width: 85%;
      }
    }  		
	</style>
	<!-- 如果没有 则 提供一些高级的js功能  -->
	<script src="/gaoa/Public/js/advancejs.js"></script>
	<!-- 不支持IE9 及以下的浏览器 -->
	<!--[if lte IE 9]> 
	<script>
		window.location.href="<?php echo U('login/notsupport');?>";
	</script>
	<![endif]-->
	
  <style>
    .el-tabs__header{
      border-top:2px solid #ea4b4b;
      border-bottom: 1px solid #c51f1f;
    }
    .el-dialog .el-tabs__header{
      border-top:none;
    }
    .el-tabs--border-card .el-tabs__item{
      border-left: none;
    }
    .el-tabs--border-card .el-tabs__item.is-active {
      background-color: #fff;
      border-right-color: #d3dce6;
      background: #544b8f;
      color: #fff;
    }
    .el-tabs--border-card .el-tabs__header {
      background-color: #fff;
      margin: 0;
    }
    .container > .wrapp > .a > .el-row {
      margin-bottom: 6px;
    }
    .el-tabs--border-card .el-tabs__content{
      padding:0 9px 5px 9px;
    }
    .el-card, .el-menu--horizontal .el-submenu>.el-menu, .el-tabs--border-card{
      box-shadow: none;
    }
    .el-tabs--border-card{
      border: none;
    }
    .el-tabs__item{
    	font-family: Microsoft YaHei;
    	color:#0d0f10;
    	font-size: 14px;
    }
    .el-dialog__body{
      color: rgb(72, 87, 106);
      font-size: 14px;
      /*padding: 30px 20px;*/
      padding: 30px 20px 6px 20px;
    }
  </style>

</head>
<body>
	
	
	<div id="app" class="container">
		<div class="wrapp" v-show="show" style="display:none;">
			<div class="a">
				<el-row>
        	<el-col :span="24">
          	<el-form :inline="true" ref="searchForm" :model="searchForm">
 
			  		  <el-form-item>
	              <el-select size="small" style="width:120px;" v-model="searchForm.type" 
                 placeholder="费用类型" @change="changeType">
                  <el-option v-for="item in Type" :label="item.label" :value="item.value"></el-option>
	              </el-select>
			  		  </el-form-item>

			  		  <el-form-item prop="name" style="width:150px">
			  		    <el-input v-model="searchForm.name" size="small" placeholder="经报人姓名"></el-input>
			  		  </el-form-item>

	            <el-form-item prop="start">
                <el-date-picker size="small" v-model="searchForm.start" 
                  placeholder="选择开始日期" 
                  @change="startDateChange">
                </el-date-picker>
	            </el-form-item>
	            <el-form-item prop="end">
                <el-date-picker size="small"
                  v-model="searchForm.end" 
                  placeholder="选择截止日期" 
                  @change="endDateChange">
                </el-date-picker>
	            </el-form-item>

	            <el-form-item>
	              <el-tooltip content="填写或者选择好筛选条件后点击此按钮" placement="bottom-start">
	                <el-button type="info" size="small" icon="search" @click="loadDatalist">查询</el-button>
	              </el-tooltip> 
	            </el-form-item>
             
              <el-form-item>
	              <el-tooltip content="清空搜索框并刷新表格数据" placement="bottom-start">
	                <el-button size="small" @click="searchReset">重置</el-button>
	              </el-tooltip>
              </el-form-item>

	            <el-form-item>
	              <el-tooltip content="点击刷新当前页面" placement="right">
	                <el-button @click="refresh" size="small" type="danger">刷新</el-button>
	              </el-tooltip>
	            </el-form-item>

            </el-form>
          </el-col>
			  </el-row>

			  <el-row>
        	<el-col :span="24">
	          <el-table v-loading="dataLoad" :data="dataList"
                @selection-change="handleChange"
                @row-dblclick = "showInfo"
	              element-loading-text="<?php echo L('DATA_LOGIN');?>"
	              empty-text="暂无数据,销售妹子正在努力中！"
	              highlight-current-row ref="select" >
              <el-table-column type="selection" width="55"></el-table-column>

			  	    <el-table-column label="<?php echo L('INDEX');?>" type="index" width="65" >
			  	    </el-table-column>

	            <el-table-column  align="center" prop="order_num" label="单据编号">
	            </el-table-column>

			  	    <el-table-column  align="center" prop="type" label="费用类型">
			  	    </el-table-column>

              <el-table-column  align="center" prop="pre_expenses" label="预支费用">
              </el-table-column>

              <el-table-column  align="center" prop="reimbursemen" label="报销金额">
              </el-table-column>

              <el-table-column  align="center" prop="department" label="使用单位">
              </el-table-column>

              <el-table-column  align="center" prop="reason" label="报销事由" show-overflow-tooltip>
              </el-table-column>

              <el-table-column  align="center" prop="jb_man" label="经报人">
              </el-table-column>

              <el-table-column  align="center" prop="re_time" label="申请时间" width="180px">
              </el-table-column>

			        <el-table-column align="center" prop="remark" label="备注" show-overflow-tooltip>
              </el-table-column>
	          </el-table>
          </el-col>
			  </el-row>

			  <el-row>
			  	<el-col :span="12">
			      <div class="grid-content bg-purple">
              <span class="wrapper">
                <el-tooltip content="至少选择一条申请再点击删除" placement="bottom-start">
                  <el-button size="small" @click="delApplication" type="danger">删除</el-button>
                </el-tooltip>
                <el-tooltip content="点击新增一个活动申请" placement="right">
                  <el-button size="small" @click="openDialog('expense')" type="primary">新增明细</el-button>
                </el-tooltip>
              </span>
			      </div>
			    </el-col>
			  	<el-col :span="12" >
			      <div class="grid-content bg-purple-light pull-right">
			        <!-- page -->
			        <el-pagination
  @current-change="handleCurrentPageChange"
  :current-page="currentPage"
  layout="total, prev, pager, next, jumper"
  :total="total"
  :page-size="pageSize"
  ref="pagination"
  >
</el-pagination>
			        <!-- / page -->
			      </div>
			    </el-col>
			  </el-row>
        <el-row>
          <el-col :span="24">
            <div id="echarts" style="height:400px;width:1000px;margin-top:20px;">
              
            </div>
          </el-col>
        </el-row>
			</div>
			<div class="dialogWrapper" v-show="show" style="display: none">
			  <!-- 新增 -->
			  <el-dialog title="新增明细" v-model="expenseFormDialog">
  <el-form  ref="expenseForm" :label-width="dialogLabelWidth" :model="expenseForm">

    <el-row>
      <el-col :span="11">
        <el-form-item label="费用类型" prop="type">
          <el-select size="small" style="width:150px;" v-model="expenseForm.type" 
           placeholder="请选择费用类型">
            <el-option v-for="item in Type" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="11">
        <el-form-item label="使用单位" prop="department">
          <el-form-item>
            <el-select size="small" v-model="expenseForm.department" placeholder="请选择使用单位">
              <el-option v-for="item in Department" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-form-item>
      </el-col> 
    </el-row>

    <el-row>
      <el-col :span="11">
        <el-form-item label="预支费用" prop="pre_expenses">
          <el-input v-model="expenseForm.pre_expenses" placeholder="格式为数字和小数点8888或888.8"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="11">
        <el-form-item label="报销金额" prop="reimbursemen">
          <el-input v-model="expenseForm.reimbursemen" placeholder="格式为数字和小数点8888或888.8"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="22">
        <el-form-item label="报销事由" prop="reason">
          <el-input v-model="expenseForm.reason" placeholder="请填写报销事由"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="11">
        <el-form-item label="经报人" prop="jb_man">
          <el-input v-model="expenseForm.jb_man" placeholder="请填写经报人"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="11">
        <el-form-item label="报销日期" prop="re_time">
          <el-date-picker v-model="expenseForm.re_time" type="date" placeholder="选择报销日期" 
           style="max-width:200px;" :editable="false" @change="reTime">
          </el-date-picker>
        </el-form-item>
      </el-col>
    </el-row>
 
    <el-row>
      <el-col :span="22">
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" :rows="4" v-model="expenseForm.remark" placeholder="请填写活动备注"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>

  <div slot="footer" class="dialog-footer">
   <el-button @click="expenseFormDialog=false">取 消</el-button>
   <el-button type="primary" v-show="!expenseFormSubmitStatus" @click="expenseSubmit(expenseForm)">确 定</el-button>
   <el-button type="primary" v-show="expenseFormSubmitStatus" :loading="true" >添加中</el-button>
  </div>

</el-dialog>

		    <!-- / 新增 -->
        <!-- 展示行信息 -->
        <el-dialog title="信息展示" :visible.sync="infoDialog">
  <el-row style="font-size:16px;padding:0 0 5px 30px;">
    <el-col :span="7">
      <a style="font-weight:bold;">费用类型：</a>{{infoData.type}}
    </el-col>
    <el-col :span="7">
      <a style="font-weight:bold;">使用单位：</a>{{infoData.department}}
    </el-col>
    <el-col :span="8">
      <a style="font-weight:bold;">单据编号：</a>{{infoData.order_num}}
    </el-col>
  </el-row>

  <el-row style="font-size:16px;padding:0 0 5px 30px;">
    <el-col :span="11">
      <a style="font-weight:bold;">预支费用：</a>{{infoData.pre_expenses}}
    </el-col>
    <el-col :span="11">
      <a style="font-weight:bold;">报销金额：</a>{{infoData.reimbursemen}}
    </el-col>
  </el-row>

  <el-row style="font-size:16px;padding:0 0 5px 30px;">
    <el-col :span="11">
      <a style="font-weight:bold;">报销事由：</a>{{infoData.reason}}
    </el-col>
  </el-row>

  <el-row style="font-size:16px;padding:0 0 5px 30px;">
    <el-col :span="11">
      <a style="font-weight:bold;">经报人：</a>{{infoData.jb_man}}
    </el-col>
    <el-col :span="11">
      <a style="font-weight:bold;">报销日期：</a>{{infoData.re_time}}
    </el-col>
  </el-row>

  <el-row style="font-size:16px;padding:0 0 5px 30px;">
    <el-col :span="22">
      <a style="font-weight:bold;">申请理由：</a>{{infoData.reason}}
    </el-col>
  </el-row>

  <el-row style="font-size:16px;padding:0 0 5px 30px;">
    <el-col :span="22">
      <a style="font-weight:bold;">备注：</a>{{infoData.remark}}
    </el-col>
  </el-row>

  <div slot="footer" class="dialog-footer">
   <el-button type="primary" @click="infoDialog = false">知道了</el-button>
  </div>

</el-dialog>

        <!-- / 展示行信息 -->
			</div>
		</div>
	</div>

	<script src="/gaoa/Public/js/vue.min.js"></script>
  <script src="/gaoa/Public/js/element-ui--index.js"></script>
	<script src="/gaoa/Public/js/vue-resource.min.js"></script>

	<!-- vue 通用部分  -->
	<script src="/gaoa/Public/js/vueHooks.js"></script>
	<script src="/gaoa/Public/js/vueMethods.js"></script>
	<script src="/gaoa/Public/js/vueOption.js"></script>
	<script src="/gaoa/Public/js/vueCommonLogic.js?b=d"></script>
	<script>
		var page = {
			addFormUrl:"<?php echo U('add');?>",
			editFormUrl:"<?php echo U('edit');?>",
			listUrl:"<?php echo U('getList');?>",
			deleteUrl:"<?php echo U('delete');?>",
			pageSize:<?php echo ($pageSize); ?>
		}
		window.defaultOption = new VueOption();

		// setCommonLogin 还可以再细分
		setCommonLogic(window.defaultOption);


	</script>

	<!-- / vue 通用部分  -->


	<script>
		
		
	</script>


	
<script src="/gaoa/Public/js/echarts.min.js"></script>  
<script>
	window.defaultOption.setVueHook('mounted',function(){
    var vmThis = this;
    var edom = document.getElementById('echarts');
    var myChart = echarts.init(document.getElementById('echarts'));
    var colors = ['#5793f3', '#27727B', '#675bba','#C1232B','#B5C334','#FCCE10','#E87C25','#27727B'];

    var option = {
        color: colors,
        title: {
          text: '最近一月统计情况',
          x:'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        // legend: {
        //   data:['采购费用','出差费用','活动费用','保修费用','其他费用'],
        //   align: 'right',
        //   right: 10,
        // },
        xAxis: {
          type: 'category',
          axisTick: {
              alignWithLabel: true
          },
          data: ['采购费用','出差费用','活动费用','保修费用','其他费用']
        },
        yAxis: [{
                type: 'value',
                name: '金额(元)',
                axisLine: {
                    lineStyle: {
                        color: colors[3]
                    }
                },
                axisLabel: {
                    formatter: '{value} 元'
                }
            }
        ],
        series: [
          {
              name:'报销费用',
              type:'bar',
              barWidth: '20%',
              data:[8888, 2222, 3333, 4444, 1111],
              itemStyle:{
                normal:{
                  color:function (params){
                    //console.log(params);
                    var colorList = ['#20A1FF','#E75252','#FFD720','#E51EFD','#3FDFE3'];
                    return colorList[params.dataIndex];
                  }

                }
              }
          }
        ]
    };
    
    myChart.setOption(option);
    window.onresize = myChart.resize;

  }).setDatas({
  	multipleSelection: [],
    newMultipleSelection:[], 	
    dialogLabelWidth:"120px",
    infoDialog:false,
    infoData:{},
    dataList:[
      {order_num:"20170801",type:"采购费用",pre_expenses:"8888",reimbursemen:"9999",department:"天龙一部",reason:"一万个理由哦",jb_man:"福田康夫",re_time:"2017-08-01",remark:"不告诉你！！"},
      {order_num:"20170802",type:"采购费用",pre_expenses:"8888",reimbursemen:"9999",department:"天龙一部",reason:"一万个理由哦",jb_man:"福田康夫",re_time:"2017-08-01",remark:"不告诉你！！"},
      {order_num:"20170803",type:"采购费用",pre_expenses:"8888",reimbursemen:"9999",department:"天龙一部",reason:"一万个理由哦",jb_man:"福田康夫",re_time:"2017-08-01",remark:"不告诉你！！"},
      {order_num:"20170804",type:"采购费用",pre_expenses:"8888",reimbursemen:"9999",department:"天龙一部",reason:"一万个理由哦",jb_man:"福田康夫",re_time:"2017-08-01",remark:"不告诉你！！"},
      {order_num:"20170805",type:"采购费用",pre_expenses:"8888",reimbursemen:"9999",department:"天龙一部",reason:"一万个理由哦",jb_man:"福田康夫",re_time:"2017-08-01",remark:"不告诉你！！"},
      {order_num:"20170806",type:"采购费用",pre_expenses:"8888",reimbursemen:"9999",department:"天龙一部",reason:"一万个理由哦",jb_man:"福田康夫",re_time:"2017-08-01",remark:"不告诉你！！"},
      {order_num:"20170807",type:"采购费用",pre_expenses:"8888",reimbursemen:"9999",department:"天龙一部",reason:"一万个理由哦",jb_man:"福田康夫",re_time:"2017-08-01",remark:"不告诉你！！"},
      {order_num:"20170808",type:"采购费用",pre_expenses:"8888",reimbursemen:"9999",department:"天龙一部",reason:"一万个理由哦",jb_man:"福田康夫",re_time:"2017-08-01",remark:"不告诉你！！"},
    	{order_num:"20170809",type:"采购费用",pre_expenses:"8888",reimbursemen:"9999",department:"天龙一部",reason:"一万个理由哦",jb_man:"福田康夫",re_time:"2017-08-01",remark:"不告诉你！！"},
      {order_num:"20170810",type:"采购费用",pre_expenses:"8888",reimbursemen:"9999",department:"天龙一部",reason:"一万个理由哦",jb_man:"福田康夫",re_time:"2017-08-01",remark:"不告诉你！！"},
  	],
    Type:[
      {label:"采购费用",value:"1"},
      {label:"出差费用",value:"2"},
      {label:"活动费用",value:"3"},
      {label:"保修费用",value:"4"},
      {label:"其他费用",value:"5"}
    ],
    Department:[
      {label:"天龙一部",value:"1"},
      {label:"天龙二部",value:"2"},
      {label:"天龙三部",value:"3"},
      {label:"天龙四部",value:"4"},
      {label:"天龙五部",value:"5"},
      {label:"天龙六部",value:"6"},
      {label:"天龙七部",value:"7"},
      {label:"天龙八部",value:"8"}
    ]

	}).setForm('search',{
    type:"1",
    name:"",
    start:"",
    end:"",
	}).setForm('expense',{
    order_num:"",
    type:"",
    pre_expenses:"",
    reimbursemen:"",
    department:"",
    reason:"",
    jb_man:"",
    re_time:"",
    remark:"",
	},true).setMethod('startDateChange',function(v){
		this.searchForm.start = v;
	}).setMethod('endDateChange',function(v){
		this.searchForm.end = v;
	}).setMethod('changeType',function(v){
    var vmThis = this;
    this.dataList.forEach(function(element){
      for(var i = 0;i < vmThis.Type.length;i++){
        if(vmThis.Type[i].value == v){
          element.type = vmThis.Type[i].label;
        }
      }
      
    });
  
  }).setMethod('beforeActivity',function(){
  	//console.log(this.multipleSelection);
    var vmThis = this;
    if (this.multipleSelection.length ==0) {
      this.closeDialog('businessTrip');
      this.$message.error('请至少选择一位客户');
      return false;
    } else {
      
      this.newMultipleSelection = this.multipleSelection.splice(0,this.multipleSelection.length);

      return this.newMultipleSelection;
    }
  }).setMethod('handleChange',function(val){
    this.multipleSelection = [];
    this.multipleSelection = val;
  }).setMethod('approveSubmit',function(){  
    for(var i = 0; i < this.dataList.length; i++){
      for(var k = 0; k < this.newMultipleSelection.length; k++){
        if(this.dataList[i] == this.newMultipleSelection[k]){
          this.dataList[i].status = this.approveForm.status == 1 ? "审批通过" : "审批不通过";
        }
      }
    }

    this.closeDialog('businessTrip');

  }).setMethod('delApplication',function(){
    var vmThis = this;
    if (this.multipleSelection.length ==0) {
      this.$message.error('请至少选择一位客户');
      return false;
    } else {
      var row = this.multipleSelection;
      this.row=row;
      this.$confirm('确定取消吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function(){
        for(var i = 0; i < vmThis.dataList.length; i++){
          for(var k = 0; k < vmThis.multipleSelection.length; k++){
            if(vmThis.dataList[i] == vmThis.multipleSelection[k]){
              
              vmThis.dataList.splice(i,1);

            }
          }
        }
        vmThis.$message({
          type: 'success',
          message: '删除成功！'
        });  
      }).catch(function() {
        vmThis.$message({
          type: 'info',
          message: '已取消删除！'
        });          
      });
     
    }
  }).setMethod('reTime',function(v){
    this.expenseForm.re_time = v;
  }).setMethod('expenseSubmit',function(expenseForm){
    for(var i = 0;i < this.Type.length;i++){
      if(this.Type[i].value == expenseForm.type){
        expenseForm.type = this.Type[i].label;
      }
    }

    for(var i = 0;i < this.Department.length;i++){
      if(this.Department[i].value == expenseForm.department){
        expenseForm.department = this.Department[i].label;
      }
    }

    var d = new Date();
    var year = d.getFullYear();
    var month = (d.getMonth()+1);
    var months = month<10 ? "0" + month : month;
    var day = d.getDate();
    var days = day<10 ? "0" + day : day;
    expenseForm.order_num = year + months + days;
    this.dataList.unshift(expenseForm);
    this.closeDialog('expense');
  }).setMethod('showInfo',function(row, event){
    this.infoData = row;
    this.infoDialog = true;
    console.log(row);
  });
</script>
<script>

</script>

	<script>
	//改modal

		window.defaultVm = new Vue(window.defaultOption.getOption()).$mount('#app');
	</script>
</body>
</html>